<template>
  <MainContainer class="p-5">
    <MyQuery
      v-model:params="params"
      :options="queryOptions"
      @query="handleQuery"
      @reset="handleReset"
    ></MyQuery>
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <!-- 分配角色 -->
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      title="绑定摄像头"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MyQuery from "@/components/MyQuery.vue";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import { fetchList } from "@/api/robot-archives.js";
import {
  fetchList as fetchCameraList,
  setCameraRid,
  getByCode,
} from "@/api/robot-camera.js";
import { ref } from "vue";

const queryOptions = [
  {
    prop: "name",
    placeholder: "机器人名称",
  },
  {
    prop: "code",
    placeholder: "机器人识别码",
  },
  {
    prop: "rType",
    placeholder: "机器人类型",
    customRender() {
      const options = [
        {
          label: "室内",
          value: "insideInspection",
        },
        {
          label: "室外",
          value: "outsideInspection",
        },
      ];
      return (
        <el-select>
          {options.map((item) => {
            return (
              <el-option label={item.label} value={item.value}></el-option>
            );
          })}
        </el-select>
      );
    },
  },
];

const columns = [
  {
    label: "编号",
    prop: "id",
  },
  {
    label: "机器人名称",
    prop: "name",
  },
  {
    label: "编码",
    prop: "code",
  },
  {
    label: "状态",
    prop: "status",
  },
  {
    label: "操作",
    prop: "action",
    customRender(row) {
      return (
        <div>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row)}
          >
            绑定摄像头
          </el-button>
        </div>
      );
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
  newParams: { RType: "inspection" },
};
const { params, handleQuery, list, loading, handleReset, total } =
  useCRUD(crudOptions);

handleQuery();

// 绑定摄像头相关 --------------------------------------------------------
const dialogVisible = ref(false);
const formData = ref({});
const cameraList = ref([]);
const formOptions = [
  {
    prop: "cameraId",
    label: "摄像头",
    customRender() {
      return (
        <el-select placeholder="请选择" class="w-full">
          {cameraList.value.map((item) => {
            return <el-option label={item.name} value={item.id}></el-option>;
          })}
        </el-select>
      );
    },
  },
];

const curRobot = ref({});
async function openDialog(row) {
  dialogVisible.value = true;
  curRobot.value = row;
  const { data } = await getByCode(row.code, row.type);
  if (data.length > 0) {
    formData.value.cameraId = data[0].id;
  }
}

async function getCameraList() {
  const { data } = await fetchCameraList({ page: 1, limit: 999 });
  cameraList.value = data.list || [];
}

getCameraList();

async function handleConfirm(data) {
  loading.value = true;
  await setCameraRid({
    id: data.cameraId,
    rid: curRobot.value.code,
    rtype: curRobot.value.type,
  });
  loading.value = false;
  dialogVisible.value = false;
}
</script>
